import React from "react";

interface OSIconProps {
  os?: string;
  arch?: string;
  type?: "os" | "arch";
  className?: string;
}

export const OSIcon: React.FC<OSIconProps> = ({
  os,
  arch,
  type = "os",
  className = "w-4 h-4",
}) => {
  const getOSIcon = (osName: string) => {
    const osLower = osName.toLowerCase();

    if (osLower.includes("windows")) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.351" />
        </svg>
      );
    }

    if (
      osLower.includes("linux") ||
      osLower.includes("ubuntu") ||
      osLower.includes("debian") ||
      osLower.includes("centos") ||
      osLower.includes("redhat") ||
      osLower.includes("fedora")
    ) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.504 0c-.155 0-.315.008-.480.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706c-.1.146-.247.273-.398.392a1.249 1.249 0 01-.543.2 1.301 1.301 0 01-.485-.06c-.207-.08-.347-.222-.472-.368a1.679 1.679 0 01-.305-.668c-.044-.239-.003-.457.046-.672.040-.168.095-.284.168-.403.145-.238.343-.356.539-.398a.706.706 0 01.402-.042zm4.505 1.036a.143.143 0 00-.031.009l.036-.004-.005-.005zm-.549.104c-.831.02-1.066.756-1.098 1.02-.037.31-.17.542-.334.828-.163.286-.351.543-.421.999-.051.334.010.696.154.98.144.283.397.509.658.678.522.338 1.372.347 1.975.075.603-.272 1.178-.781 1.157-1.307-.02-.525-.396-.989-.922-1.266-.526-.276-1.169-.401-1.169-.007zm-2.027 2.507c-.403.005-.416.5-.416.5s.013.495.416.5c.402-.005.415-.5.415-.5s-.013-.495-.415-.5z" />
        </svg>
      );
    }

    if (
      osLower.includes("mac") ||
      osLower.includes("darwin") ||
      osLower.includes("macos")
    ) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
        </svg>
      );
    }

    if (osLower.includes("android")) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0989L4.841 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3435-4.1021-2.6892-7.5743-6.1185-9.4396" />
        </svg>
      );
    }

    // 默认显示通用操作系统图标
    return (
      <svg className={className} fill="currentColor" viewBox="0 0 24 24">
        <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
      </svg>
    );
  };

  const getArchIcon = (archName: string) => {
    const archLower = archName.toLowerCase();

    if (
      archLower.includes("x64") ||
      archLower.includes("amd64") ||
      archLower.includes("x86_64")
    ) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
        </svg>
      );
    }

    if (archLower.includes("arm") || archLower.includes("aarch64")) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M9.5 2A1.5 1.5 0 008 3.5v1A1.5 1.5 0 009.5 6h5A1.5 1.5 0 0016 4.5v-1A1.5 1.5 0 0014.5 2h-5zM12 8a4 4 0 00-4 4v6a2 2 0 002 2h4a2 2 0 002-2v-6a4 4 0 00-4-4z" />
        </svg>
      );
    }

    if (
      archLower.includes("x86") ||
      archLower.includes("i386") ||
      archLower.includes("i686")
    ) {
      return (
        <svg className={className} fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5" />
        </svg>
      );
    }

    // 默认CPU图标
    return (
      <svg className={className} fill="currentColor" viewBox="0 0 24 24">
        <path d="M6 18h12V8H6v10zM8 4h8v2H8V4zM8 20v-2h8v2H8z" />
      </svg>
    );
  };

  if (type === "arch" && arch) {
    return getArchIcon(arch);
  }

  if (type === "os" && os) {
    return getOSIcon(os);
  }

  return null;
};
